<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
			transition:all 1s 3s;
/*			过度  可以设置一个值到另一个值所需时间*/
/*			all 所有的css 属性  都参与过度*/
/*			1s  过度所需时间*/
/*			3s指的是延迟时间  延迟多久才开始运行*/
		}
		.box:hover{
			width: 500px;
			background-color: blue;

		}
		li{
			list-style: none;
/*			去掉  黑点*/
			width: 200px;
			height: 200px;
			background-color: orange;
			margin: 50px auto;
			transition: all 1s;
/*			transform: rotate(45deg);*/
/*			rotate  旋转  正值为顺时针  负值为逆时针*/
/*			deg  度*/
		}
		li:nth-of-type(1):hover{
/*			transform-origin: left top;*/
/*			设置 旋转的  参考点  默认时center  center*/
/*			transform: rotateX(555deg) rotateY(45deg) rotateZ(45deg);*/
			transform: rotate3d(1,1,1,45deg);
			/*第一个值 代表x轴  0代表不参与旋转  1 嗲表参与旋转
			第二个值  代表y轴  0代表不参与旋转  1 嗲表参与旋转
			第三个值  代表x轴  0代表不参与旋转  1 嗲表参与旋转
			第四个值  嗲表旋转多少度*/
		}

		li:nth-of-type(2):hover{
/*			位移*/
/*			transform: translate(x轴方向  y轴方向);*/
			transform: translate(0%,-50%);
/*			transform: translateZ(100px);*/
		}
		li:nth-of-type(3):hover{
/*			缩放*/
			transform: scale(0.6);
/*			正常比例时1.0  小于1 就是缩小  大于1  就是放大*/
		}
		li:nth-of-type(4):hover{
/*			transform: skew(X轴倾斜角度，Y轴倾斜角度);*/
			transform: skew(0deg,45deg);
		}
	</style>
</head>
<body>


	<div class="box"></div>

	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>






</body>
</html>